<template>
	<!-- 风格选择 -->
	<div class="form_title">
		<div class="left_title">
			选择风格
		</div>
		<a-tooltip placement="left">
			<template #title>
				可以选择风格
			</template>
			<QuestionCircleOutlined />
		</a-tooltip>
	</div>
					
	<div class="form_value">
		<div class="style_con">
			<template v-for="(item, index) in styleModelList" :key="index">
				<div v-if="index<=5 || expandStyle"
					:style="{ backgroundImage: 'url(' + item.example_img + ')' }"
					class="style_item" :class="styleIndex == index ? 'active' : ''"
					@click="chooseStyle(index)">
					<div v-if="styleIndex == index" class="move_box"></div>
					<div class="bottom_title">{{item.name}}</div>
				</div>
			</template>
		</div>
		<div class="style_operate" v-if="styleModelList.length>6" @click="changeStatus">{{expandStyle?'收缩':'展开'}}
		</div>
	</div>
</template>

<script>
	import {QuestionCircleOutlined} from '@ant-design/icons-vue';
	import {reactive, toRefs, defineComponent} from 'vue';
	export default defineComponent({
		emits: ['chooseStyle', 'changeStatus'],
		props: {
			styleModelList: {
				type: Array,
				default: ()=> {return []}
			},
			styleIndex: {
				type: Number,
				default: 0
			},
			expandStyle: {
				type: Boolean,
				default: false
			}
		},
		components: {
			QuestionCircleOutlined
		},
		setup(props, context) {
			const chooseStyle = (index) => {
				context.emit('chooseStyle', index)
			}
			const changeStatus = () => {
				context.emit('changeStatus')
			}
			return {
				chooseStyle,
				changeStatus
			}
		}
	})
</script>

<style lang="less" scoped>
	.form_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
		
		.left_title {
			font-size: 14px;
			font-weight: bold;
			color: #333333;
		}
		
		.right_con {
			font-size: 12px;
		}
	}
		
	.form_value {
		margin-top: 5px;
		
		.style_operate {
			margin-top: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333333;
			padding: 5px 0;
			border: 1px solid #eeeeee;
			cursor: pointer;
		}
		
		.style_con {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			width: 100%;
		
			.style_item {
				width: 31%;
				height: 80px;
				background-color: #eeeeee;
				border: 2px solid #eeeeee;
				border-radius: 10px;
				margin-left: 1.5%;
				margin-top: 5px;
				cursor: pointer;
				flex-shrink: 0;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				flex-direction: column;
				position: relative;
				overflow: hidden;
		
				.bottom_title {
					position: absolute;
					bottom: 0;
					width: 100%;
					padding: 2px;
					font: var(--text-p2-bold);
					font-weight: 500;
					text-align: center;
					background-color: var(--background-color-transparent-secondary-regular);
					border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
					-webkit-backdrop-filter: blur(30px);
					backdrop-filter: blur(30px);
					pointer-events: none;
					color: #fff;
					font-size: 14px;
					display: inline-block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					border-bottom-left-radius: 10px;
					border-bottom-right-radius: 10px;
				}
		
				&:hover {
					background-size: 120%;
				}
		
				@keyframes move {
					25% {
						left: 100%;
						top: 0;
					}
		
					50% {
						left: 100%;
						top: 82px;
					}
		
					75% {
						left: 0;
						top: 82px;
					}
				}
		
				.move_box {
					z-index: 999;
					width: 7px;
					height: 7px;
					border-radius: 50px;
					position: absolute;
					transform: translate(-50%, -50%);
					top: -7px;
					left: -7px;
					background-color: #fff;
					box-shadow: 0 0 10px 5px #fff;
					animation: move 2s linear infinite;
				}
		
				.style_title {
					color: #fff;
					font-size: 16px;
					margin-left: 5px;
					width: 110px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: inline-block;
				}
		
				.style_desc {
					color: #fff;
					font-size: 14px;
					margin-left: 5px;
					width: 110px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: inline-block;
				}
		
				&:nth-last-child(1) {
					margin-right: 5px;
				}
		
				&.active {
					border: 2px solid #938bff;
				}
			}
		}
	}
</style>